<extend name="Base/common" />
<block name="body">
<style text='text/css'>
.image_material{
    border: 1px dashed #ddd;
    width: 308px;
    height: 196px;
     background: #eee;
    text-align: center;
    color: #333;
    display: block;
    float: left;
	margin-left:10px;
   display:none;
   position:relative;
}
.image_material .select_image{line-height: 196px; display:block; height:200px;}
.image_material .delete{ position:absolute; bottom:3px; left:3px; display:none}
.appmsg_area{ position:relative;}
.appmsg_area .delete{ position:absolute; bottom:10px; left:10px; z-index:1000; margin:10px;}
.voice_wrap{ width:308px;}
.video_wrap{ width:222px;}
#video_area{ height:250px}
.appmsg_area .select_video{  height: 240px;line-height: 240px; cursor:pointer}
</style>
  <div class="span9 page_message">
    <section id="contents"> 
    	<include file="Addons/_nav" /> 
      <div class="tab-content">
       <div style = "text-align:right;">
      <input type ='button' value ='返回' onclick ='window.history.go(-1)'/>
      </div>
      	<h3>与 {$toUser.nickname} 的聊天</h3>
      	
      </div>
      <!-- 数据列表 -->
      <div class="data-table">
        
        <div class="table-striped">
          <table class="message_list" cellspacing="0">
            <thead>
            	<tr>
                	<th colspan="3" id='can_send'>
                    	<div class="msg_tab">
                        	<a class="txt current" href="javascript:;">文本消息</a>
                            <a class="appmsg" href="javascript:;">图文消息</a>
                            <a class="image" href="javascript:;">图片消息</a>
                <a class="voice" href="javascript:;">语音消息</a>
                <a class="video" href="javascript:;">视频消息</a>
                        </div>
                    	<form id="form" action="{:U('reply')}" method="post" class="form-horizontal form-center">
                        	<input type="hidden" name="msg_type" value="text"/>
                        	<input type="hidden" class="text input-large" name="openid" value="{:I('openid')}">
                            <label class="textarea input-large">
                             	<textarea name="content" placeholder="请输入要发送的文本" id='message_text'></textarea>
                                <div style="display:none" class="appmsg_area" id="appmsg_area">
                                	<input type="hidden" name="appmsg_id" value="0"/>
                                    <a class="select_appmsg" href="javascript:;" onClick="$.WeiPHP.openSelectAppMsg('{:U('/Home/Material/material_data')}',selectAppMsgCallback)">选择图文</a>
                                    <div class="appmsg_wrap"></div>
                                    <a class="delete" href="javascript:;" style="left: 310px;">删除</a>
                                </div>
                          <div style="display:none;margin:0 10px 10px 0; background:#ddd; padding:6px;height:204px; width:930px;float:left" class="msg_image controls">
                    	<div class="uploadrow2" rel="image" title="点击修改图片" style="float:left; width:308px;">
                            <input type="file" id="upload_picture_image">
                            <input type="hidden" name="image" id="cover_id_image" value="0"/>
                            <div class="upload-img-box" style="display:none;">
                                <div class="upload-pre-item2"><img width="100" height="100" src=""/></div>
                            </div>
                        </div>
                        <div class='image_material' id='image_material'>
                            <input type="hidden" name="image_material" id="cover_id_image" value="0"/>
                            <a class="select_image" href="javascript:;"  onClick="$.WeiPHP.openSelectAppMsg('{:U('/Home/Material/picture_data')}',selectImageCallback,'选择图片素材')">从素材库选择图片</a>
                            <div class="image_wrap"></div>
                            <a class="delete" href="javascript:;" style="left: 15px;">删除</a>
                         </div>
                    </div>
                    <div style="display:none" class="appmsg_area" id="voice_area">
                        <input type="hidden" name="voice_id" value="0"/>
                        <a class="select_appmsg" href="javascript:;" onClick="$.WeiPHP.openSelectAppMsg('{:U('/Home/Material/voice_data')}',selectVoiceCallback,'选择语音素材')">选择语音素材</a>
                        <div class="voice_wrap"></div>
                        <a class="delete" href="javascript:;" style="left: 310px;display: inline;">删除</a>
                    </div>
                      <div style="display:none" class="appmsg_area" id="video_area">
                        <input type="hidden" name="video_id" value="0"/>
                        <a class="select_appmsg select_video" href="javascript:;" onClick="$.WeiPHP.openSelectAppMsg('{:U('/Home/Material/video_data')}',selectVideoCallback,'选择视频素材')">选择视频素材</a>
                        <div class="video_wrap"></div>
                        <a class="delete" href="javascript:;" style="left: 310px;">删除</a>
                    </div>
                     
                             </label>
                             <!--
                             <div class="action_type">
                             	<a class="action_item face" href="javascript:;" title="表情">&nbsp;</a>
                                <a class="action_item link" href="javascript:;" title="连接">&nbsp;</a>
                                <div class="action_item picture" href="javascript:;" title="图片">
                                	<div class="controls uploadrow2" title="点击修改图片" rel="pic">
                                      <input type="file" id="upload_picture_pic">
                                      <input type="hidden" name="pic" id="cover_id_pic" value="0"/>
                                      <div class="upload-img-box">
                                       
                                          <div class="upload-pre-item2"><img width="100" height="100" src=""/></div>
                                        
                                      </div>
                                  </div>
                                </div>
                                <a class="action_item article" href="javascript:;" title="图文">&nbsp;</a>
                             </div>
                             -->
                             <button class="btn submit-btn ajax-post" id="submit" type="submit" target-form="form-horizontal">回 复</button>
                        	 <a href='javascript:;' id='getText'  onClick="selectText();" style="display: inline;border: 1px solid #C5CBDC;padding: 8px;margin-left: 20px;border-radius: 5px;background-color: #E6E9F3;color: cadetblue;">选择文本素材</a>
                        		
                        </form>
                    </th>
                </tr>
            </thead>
            <!-- 列表 -->
            <tbody>
              <volist name="list_data" id="vo">
                <tr>
                  <td width="50%" class="user">
                	<notempty name="vo[user][headimgurl]">
                		<img width="50" src="{$vo.user.headimgurl}"/>
                    <else/>
                    	<img width="50" src="__IMG__/default.png"/>
                    </notempty>
                	<div class="u_info">
                    	<notempty name="vo[user][headimgurl]">
                            <p class="name">{$vo.user.nickname}</p>
                        <else/>
                            <p class="name">{$vo.openid}</p>
                        </notempty>
                    	
                        <p class="msg">
                        	<if condition="$vo['Content']['msg_type'] eq 'image'">
                        		<a target="_blank" href="{$vo.Content.url}"><img width="100" height="100" src="{$vo.Content.url}"></a>
                        	<elseif condition="$vo['Content']['msg_type'] eq 'voice'" />
	                        	<div class="sound_item" onClick="playSound('sound_{$vo.Content.id}',this);">
	                            <img class="icon_sound" src="__IMG__/icon_sound.png"/>
	                            <p class="audio_name">{$vo.Content.title}<span class="fr colorless"></span></p>
	                            <p class="ctime colorless"></p>
	                            <audio id="sound_{$vo.Content.id}" src="{$vo.Content.file_id|get_file_url}"></audio>
	                        	</div>
                        	<elseif condition="$vo['Content']['msg_type'] eq 'video'" />
                        		<div class="video_item">
	                        	<p class="title">{$vo.Content.title}</p>
	                            <p class="ctime colorless"></p>
	                            <div class="video_area">
	                            	<video src="{$vo.Content.file_id|get_file_url}" controls="controls">您的浏览器不支持 video 标签。</video>
	                            </div>
	                             <p>{$vo.Content.introduction}</p>
	                        	</div>
                        	<elseif condition="$vo['Content']['msg_type'] eq 'news'" />
                        		<div>
	                        	<div class="appmsg_item" style="width: 270px;">
		                        <p class="title"></p>
		                        <div class="main_img">
		                            <img src="{$vo.Content.first.picurl}" width='50'/>
		                            <h6><a target="_blank" href="{$vo.Content.first.url}">{$vo.Content.first.title}</a></h6>
		                        </div>
		                        <p class="desc">{$vo.Content.first.description}</p>
			                    </div>
			                    <notempty name="vo.Content.child">
				                    <volist name="vo.Content.child" id="vv">
				                    <div class="appmsg_sub_item"  style="width: 270px;">
				                        <a target='_blank' href='{$vv.url}'><p class="title">{$vv.title}</p></a>
				                        <div class="main_img">
				                            <img src="{$vv.picurl}"/>
				                        </div>
				                    </div>
				                    </volist>
			                    </notempty>
			                    </div>
			                <elseif condition="$vo['Content']['msg_type'] eq 'shortvideo'" />
			                <elseif condition="$vo['Content']['msg_type'] eq 'location'" />
			                <elseif condition="$vo['Content']['msg_type'] eq 'link'" />  
			                	<a  target='_blank' href="{$vo.Content.url}"><h3>"{$vo.Content.title}"</h3><br>{$vo.Content.description}</a>  
	                        <else />
                        	{$vo.Content.Content}
                        	</if>
                        </p>
                    </div>
                </td>
                <td width="15%" valign="top">{$vo.CreateTime|time_format}</td>
                <td width="25%" valign="top">
                	<eq name="vo.collect" value="0"> <a href="javascript:void(0)" onclick="set_status({$vo.id},'collect', 1)">收藏</a>
                      <else />
                      <a href="javascript:void(0)" onclick="set_status({$vo.id},'collect', 0)">取消收藏</a> </eq>
                    <eq name="vo.deal" value="0"> <a href="javascript:void(0)" onclick="set_status({$vo.id},'deal', 1)">设为待处理</a>
                      <else />
                      <a href="javascript:void(0)" onclick="set_status({$vo.id},'deal', 0)">取消待处理状态</a> </eq>
                       
                       <if condition="$vo['Content']['msg_type'] eq 'voice'" >
                         <eq name="vo.is_material" value="0"> <a href="javascript:void(0)" onclick="set_material({$vo.id},'voice',1)">设为语音素材</a>
                       	 <else />
                      	<a href="javascript:void(0)" onclick="set_material({$vo.id},'voice',0)">取消设置语音素材</a> </eq>
                 	
	                   <elseif condition="$vo['Content']['msg_type'] eq 'image'" />
	                     <eq name="vo.is_material" value="0"> <a href="javascript:void(0)" onclick="set_material({$vo.id},'image',1)">设为图片素材</a>
                       	<else />
                      	<a href="javascript:void(0)" onclick="set_material({$vo.id},'image',0)">取消设置图片素材</a> </eq>
                 	
	                   <elseif condition="$vo['Content']['msg_type'] eq 'video'" />
	                     <eq name="vo.is_material" value="0"> <a href="javascript:void(0)" onclick="set_material({$vo.id},'video',1)">设为视频素材</a>
                       	<else />
                      	<a href="javascript:void(0)" onclick="set_material({$vo.id},'video',0)">取消设置视频素材</a> </eq>
                 	
	                   <elseif condition="$vo['Content']['msg_type'] eq 'link'" />
<!-- 	                     <eq name="vo.is_material" value="0"> <a href="javascript:void(0)" onclick="set_material({$vo.id},'link')">设为素材</a> -->
<!--                        	<else /> -->
<!--                       	<a href="javascript:void(0)" onclick="set_material({$vo.id},'link')">取消设置文本素材</a> </eq> -->
                 	
	                   <elseif condition="$vo['Content']['msg_type'] eq 'shortvideo'" />
<!-- 	                     <eq name="vo.is_material" value="0"> <a href="javascript:void(0)" onclick="set_material({$vo.id},'text')">设为文本素材</a> -->
<!--                        	<else /> -->
<!--                       	<a href="javascript:void(0)" onclick="set_material({$vo.id},'text')">取消设置文本素材</a> </eq> -->
                 	
	                   <elseif condition="$vo['Content']['msg_type'] eq 'news'" />
<!-- 	                     <eq name="vo.is_material" value="0"> <a href="javascript:void(0)" onclick="set_material({$vo.id},'news')">设为图文素材</a> -->
<!--                        	<else /> -->
<!--                       	<a href="javascript:void(0)" onclick="set_material({$vo.id},'news')">取消设置图文素材</a> </eq> -->
                 	
	                   <else/>
	                    <eq name="vo.is_material" value="0"> <a href="javascript:void(0)" onclick="set_material({$vo.id},'text',1)">设为文本素材</a>
                       	<else />
                      	<a href="javascript:void(0)" onclick="set_material({$vo.id},'text',0)">取消设置文本素材</a> </eq>
                 	
	                   
                      </if>
                 </td>
                </tr>
              </volist>
            </tbody>
          </table>
        </div>
      </div>
      <div class="page"> {$_page|default=''} </div>
    </section>
  </div>
</block>
<block name="script"> 
  <script type="text/javascript">
  var can_send={$can_send};
  if(can_send == 0){
	  $('#can_send').hide();
  }else{
	  $('#can_send').show();
  }
  
function set_status(id, field, val){
   $.post("{:U('set_status')}",{id:id,field:field,val:val},function(){
	   location.reload();
   })	
}
$(function(){
	//初始化上传图片插件
	initUploadImg({width:308,height:200,callback:function(){
		$('.image_wrap').html('').hide();
		$('.select_image').show();
		$('.image_material .delete').hide();
		$('input[name="image_material"]').val(0);
	}});
	$('.uploadify-button').css('background-color','#ccc')
})
$('.msg_tab .txt').click(function(){
	//纯文本
	$(this).addClass('current').siblings().removeClass('current');
	$('input[name="msg_type"]').val('text');
	$('textarea[name="content"]').show().siblings().hide();
	$('#getText').show();
	
})
$('.msg_tab .appmsg').click(function(){
	//图文消息
	$(this).addClass('current').siblings().removeClass('current');
	$('input[name="msg_type"]').val('appmsg');
	$('#appmsg_area').show().siblings().hide();
	$('#getText').hide();
	
	$('.appmsg_wrap').html('').hide();
	$('.select_appmsg').show();
	$('.appmsg_area .delete').hide();
	$('input[name="appmsg_id"]').val(0);
})
$('.msg_tab .image').click(function(){
	//图片消息
	$(this).addClass('current').siblings().removeClass('current');
	$('input[name="msg_type"]').val('image');
	$('.msg_image').show().siblings().hide();
	$('#getText').hide();
	$('#image_material').show();
	
	$('.image_wrap').html('').hide();
	$('.select_image').show();
	$('.image_material .delete').hide();
	$('input[name="image_material"]').val(0);
})
$('.msg_tab .voice').click(function(){
	//图片消息
	$(this).addClass('current').siblings().removeClass('current');
	$('input[name="msg_type"]').val('voice');
	$('#voice_area').show().siblings().hide();
	$('#voice_area .voice_wrap').html('').hide();
	$('#voice_area .select_appmsg').show();
	$('#voice_area .delete').hide();
	$('input[name="voice"]').val(0);
	$('#getText').hide();
	$('#image_material').hide();
})
$('.msg_tab .video').click(function(){
	//图片消息
	$(this).addClass('current').siblings().removeClass('current');
	$('input[name="msg_type"]').val('video');
	$('#video_area').show().siblings().hide();
	$('#getText').hide();
	$('#image_material').hide();
	
	$('#video_area .video_wrap').html('').hide();
	$('#video_area .select_appmsg').show();
	$('#video_area .delete').hide();
	$('input[name="video"]').val(0);
})



$('.appmsg_area .delete').click(function(){
	$('.appmsg_wrap').html('').hide();
	$('.select_appmsg').show();
	$('.appmsg_area .delete').hide();
	$('input[name="appmsg_id"]').val(0);
})
$('.image_material .delete').click(function(){
	$('.image_wrap').html('').hide();
	$('.select_image').show();
	$('.image_material .delete').hide();
	$('input[name="image_material"]').val(0);
})
$('#voice_area .delete').click(function(){
	$('#voice_area .voice_wrap').html('').hide();
	$('#voice_area .select_appmsg').show();
	$('#voice_area .delete').hide();
	$('input[name="voice"]').val(0);
})
$('#video_area .delete').click(function(){
	$('#video_area .video_wrap').html('').hide();
	$('#video_area .select_appmsg').show();
	$('#video_area .delete').hide();
	$('input[name="video"]').val(0);
})
function selectAppMsgCallback(_this){
	$('.appmsg_wrap').html($(_this).html()).show();
	$('.select_appmsg').hide();
	$('.appmsg_area .delete').show();
	$('input[name="appmsg_id"]').val($(_this).data('group_id'));
	$.Dialog.close();
}

function selectImageCallback(_this){
	$('.image_wrap').html($(_this).html()).show();
	$('.select_image').hide();
	$('.image_material .delete').show();
	$('input[name="image_material"]').val($(_this).data('id'));
	$("input[name='image']").val(0);
	$('.upload-img-box').hide();
	$.Dialog.close();
}
function selectVoiceCallback(_this){
	$(_this).find('.icon_sound').attr('src',IMG_PATH+'/icon_sound.png');
	$('.voice_wrap').html($(_this).html()).show();
	$('#voice_area .select_appmsg').hide();
	$('#voice_area .delete').show();
	$('input[name="voice_id"]').val($(_this).data('id'));
	$.Dialog.close();
}
function selectVideoCallback(_this){
	$('.video_wrap').html($(_this).html()).show();
	$('#video_area .select_appmsg').hide();
	$('#video_area .delete').show();
	$('input[name="video_id"]').val($(_this).data('id'));
	$.Dialog.close();
}

function set_material(id,type,set_sucai){
	var url="{:U('set_meterial')}";
	$.post(url,{'id':id,'type':type,'set_sucai':set_sucai},function(data){
			location.reload();
	});
}
function selectText(){
	$.WeiPHP.openSelectLists("{:U('Material/text_lists')}",1,'选择素材',function(data){
		if(data && data.length>0){
			for(var i=0;i<data.length;i++){
				var id=data[i]['id'];
				if(id){
					$.post("{:U('Material/get_content_by_id')}",{'id':id},function(d){
						$('#message_text').text(d);
					})
				}
			}
		}
	})
}
function playSound(id,obj){
	var audio = document.getElementById(id);
	if(audio.paused){
		audio.play();
		$(obj).find('img').attr('src',IMG_PATH+'/icon_sound_play.gif');
		audio.addEventListener('ended', function () {  
// 			alert('over');
			$(obj).find('img').attr('src',IMG_PATH+'/icon_sound.png');
		}, false);
		return;
	}
	audio.pause();
	$(obj).find('img').attr('src',IMG_PATH+'/icon_sound.png');
	
}
</script> 
</block>
